<template>
	<view v-if="list" class="content poRel">
		<view class="wid100 poRel" style="height: 650rpx;">
			<swiper class="wh100" circular :autoplay='true'>
				<swiper-item v-for="(item,index) in list.source" :key="index">
					<image :src="item" class="wh100" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<image src="../../static/pingbi.png" class="poAbs" @click="pingbi"
				style="width: 58rpx;height: 40rpx;z-index: 5;top: 20rpx;right: 20rpx;"></image>
		</view>
		<view class="wid100 bacFFF ">
			<view style="height: 40rpx;"></view>
			<view class="wid85 mar">
				<view class="dis disAl">
					<view style="width: 15%;height: 75rpx;">
						<image :src="list.coverimg" class="borRad50 hei100" style="width: 75rpx;"></image>
					</view>
					<view class="wid85">
						<view class="dis disAl disJuB">
							<view class="foSi35 fowe800">{{list.name}}</view>
							<view class="dis disAl foSi20">
								<view class="dis disAl disJuC borRad40" @click="tiaozhuan('/pages/technician/particulars?id='+list.tech_id)"
								:style="'color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'" style="width: 100rpx;height: 42rpx;">预约</view>
								<view class="dis disAl disJuC borRad40 coFFF mar-left20" @click="guanzhu()" :style="'background-color:'+theme.main_color+';'"
									style="width: 100rpx;height: 42rpx;">{{list.follow!=0?'已关注':'关注'}}</view>
							</view>
						</view>
						<view class="fowe600 foSi25 mar-top10" :style="'color: '+theme.main_color+';'">{{list.status == 1?'可服务':list.status == 2?'服务中':'可预约'}}</view>
					</view>
				</view>
				<view class="mar-top20 fowe800 foSi35">{{list.title}}</view>
				<view class="mar-top20 foSi30 webkitLineClamp" style="color: #737373;">{{list.content}}</view>
				<view class="dis disAl disJuB mar-top30">
					<view class="foSi30" style="color: #737373;">{{list.createtime}}</view>
					<view class="dis disAl">
						<uni-icons type="location-filled" size="35rpx" :color="theme.main_color"></uni-icons>
						<view class="foSi25 mar-left10">{{list.km}}km</view>
					</view>
				</view>
			</view>
			<view style="height: 30rpx;"></view>
		</view>
		<view class="wid100 bacFFF mar-top20">
			<view class="wid90 mar dis disAl foSi35 fowe800 hei86">全部评论</view>
			<block v-for="(item,index) in plList" :key="index">
				<view class="wid100" style="height: 1rpx;background-color: #E5E5E5;"></view>
				<view class="wid90 mar mar-top20">
					<view class="dis disAl">
						<view style="width: 10%;height: 55rpx;">
							<image :src="item.avatar" class="borRad50 hei100" style="width: 55rpx;"></image>
						</view>
						<view class="wid90 dis disAl disJuB">
							<view class="foSi25" style="color: #878787;line-height: 40rpx;">{{item.nickname}}</view>
							<view class="foSi20" style="color: #878787;">{{item.createtime}}</view>
						</view>
					</view>
					<view class="dis disAl">
						<view style="width: 10%;"></view>
						<view class="wid87 overflowHidden foSi25 fowe800">{{item.content}}</view>
					</view>
				</view>
				<view style="height: 30rpx;"></view>
			</block>
		</view>
		<view style="height: 150rpx;"></view>
		<view class="wid100 poFix bacFFF" style="height: 124rpx;border-top: 1rpx solid #DDDBDB;bottom: 0;">
			<view class="dis disAl disJuB wid90 mar hei100">
				<view class="dis disAl hei60 borRad40" style="width: 390rpx;background-color: #E5E5E5;">
					<view class="dis disAl disJuC" style="width: 20%;">
						<image src="../../static/pinglun.png" style="width: 26rpx;height: 25rpx;"></image>
					</view>
					<input class="wid80 foSi25 fowe600" v-model="pinglun" @blur="pinglunBlur" placeholder="说点什么..."/>
				</view>
				<view class="dis disAl" style="justify-content: space-around;width: 280rpx;">
					<view class="dis disAl" @click="dianzhan">
						<!-- <image src="../../static/xihuan.png" style="width: 34rpx;height: 31rpx;"></image> -->
						<uni-icons v-if="list.collect == 1" type="heart-filled" size="30rpx" :color="theme.main_color"></uni-icons>
						<uni-icons v-if="list.collect == 0" type="heart" size="30rpx" color="#737373"></uni-icons>
						<view class="mar-left10 foSi30">{{list.collect_num}}</view>
					</view>
					<view class="dis disAl">
						<image src="../../static/pinglu1.png" style="width: 31rpx;height: 31rpx;"></image>
						<view class="mar-left10 foSi30">1</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				id: '',
				list: '',
				pinglun: '',
				plList: [],
				theme: null
			}
		},
		onLoad(option) {
			this.id = option.id
			this.theme = uni.getStorageSync('theme')
			this.getList()
			this.getplList()
		},
		methods: {
			getplList(){
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/trends/comment_list',
					method: "POST",
					header: {
						'site-id': that.global.site_id ,//自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						tid: that.id,
						page: 1
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.plList = result.data.data
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
			},
			pinglunBlur: function(event) {
				var that = this;
				that.pinglun = event.target.value
				console.log(that.pinglun)
				if(!uni.getStorageSync('token')){
					return uni.showToast({title: '请登录',icon: 'error',duration: 2000}) 
				}
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/trends/comment_add',
					method: "POST",
					header: {
						'site-id': that.global.site_id,//自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						tid: that.list.id,
						content: that.pinglun
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							uni.navigateBack(1)
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
			},
			pingbi(){
				var that = this;
				if(!uni.getStorageSync('token')){
					return uni.showToast({title: '请登录',icon: 'error',duration: 2000}) 
				}
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/usershieid/add',
					method: "POST",
					header: {
						'site-id': that.global.site_id,//自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						tech_id: that.list.tech_id,
						type: 1
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							uni.navigateBack(1)
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
			},
			dianzhan(){
				var that = this;
				if(!uni.getStorageSync('token')){
					return uni.showToast({title: '请登录',icon: 'error',duration: 2000}) 
				}
				var type = that.list.collect == 0?1:0
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/trends/click_thumbs	',
					method: "POST",
					header: {
						'site-id': that.global.site_id,//自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						thumbs_id: that.list.id,
						click_type: type == 0?1:2
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.list.collect = type
							if(type == 1){
								that.list.collect_num += 1
							}else{
								that.list.collect_num -= 1
							}
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
			},
			guanzhu(){
				var that = this;
				if(!uni.getStorageSync('token')){
					return uni.showToast({title: '请登录',icon: 'error',duration: 2000}) 
				}
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/technician/follows',
					method: "POST",
					header: {
						'site-id': that.global.site_id ,//自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						tech_id: that.list.tech_id
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.list.follow = that.list.follow == 1?0:1
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
			},
			getList(){
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/trends/details',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						id: that.id,
						lon: uni.getStorageSync('lon')?uni.getStorageSync('lon'):125.35043,
						lat: uni.getStorageSync('lat')?uni.getStorageSync('lat'):43.86414,
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.list = result.data
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F3F1F1;
	}
</style>